<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>账号管理</span>
        <el-button
          style="float: right"
          type="primary"
          icon="el-icon-plus"
          @click="handleAdd"
        >新增</el-button>
      </div>

      <div class="mb8">
        <el-input
          v-model="queryParams.uid"
          placeholder="请选择用户账号"
          style="width: 200px"
          class="filter-item"
          clearable
        />
        <el-input
          v-model="queryParams.remark"
          placeholder="备注"
          style="width: 200px; margin-left: 10px"
          class="filter-item"
          clearable
        />
        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
      </div>

      <el-tabs v-model="activeTab">
        <el-tab-pane label="Binance" name="Binance"></el-tab-pane>
        <el-tab-pane label="OKX" name="OKX"></el-tab-pane>
        <el-tab-pane label="Bitget" name="Bitget"></el-tab-pane>
        <el-tab-pane label="Gate" name="Gate"></el-tab-pane>
        <el-tab-pane label="KuCoin" name="KuCoin"></el-tab-pane>
        <el-tab-pane label="ByBit" name="ByBit"></el-tab-pane>
        <el-tab-pane label="Huobi" name="Huobi"></el-tab-pane>
        <el-tab-pane label="Coinex" name="Coinex"></el-tab-pane>
      </el-tabs>

      <el-table
        v-loading="loading"
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="所属用户" align="center" prop="username" />
        <el-table-column label="母账号" align="center" prop="uid" />
        <el-table-column label="账号" align="center" prop="account" />
        <el-table-column label="Access Key" align="center" prop="accessKey" show-overflow-tooltip />
        <el-table-column label="Secret Key" align="center" prop="secretKey" show-overflow-tooltip />
        <el-table-column label="Passphrase" align="center" prop="passphrase" />
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleUpdate(scope.row)"
            >修改</el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </el-card>

    <!-- 添加或修改对话框 -->
    <el-dialog 
      :title="title" 
      :visible.sync="open" 
      width="800px" 
      :close-on-click-modal="false"
      :close-on-press-escape="true"
      class="exchange-dialog"
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="交易所" prop="exchange" required>
              <el-select v-model="form.exchange" placeholder="Binance" style="width: 100%">
                <el-option label="Binance" value="Binance" />
                <el-option label="OKX" value="OKX" />
                <el-option label="Bitget" value="Bitget" />
                <el-option label="Gate" value="Gate" />
                <el-option label="KuCoin" value="KuCoin" />
                <el-option label="ByBit" value="ByBit" />
                <el-option label="Huobi" value="Huobi" />
                <el-option label="Coinex" value="Coinex" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="母账号" prop="parentUid" required>
              <el-select v-model="form.parentUid" placeholder="0" style="width: 100%">
                <el-option label="0" value="0" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="账号" prop="account" required>
              <el-input v-model="form.account" placeholder="请输入账号" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="UID" prop="uid" required>
              <el-input v-model="form.uid" placeholder="请输入UID" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="Access Key" prop="accessKey" required>
              <el-input v-model="form.accessKey" placeholder="请输入Access Key" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="Secret Key" prop="secretKey" required>
              <el-input v-model="form.secretKey" placeholder="请输入Secret Key" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="Passphrase" prop="passphrase">
              <el-input v-model="form.passphrase" placeholder="请输入Passphrase" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="备注" prop="remark" required>
              <el-input v-model="form.remark" placeholder="请输入备注" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="权限列表" prop="permissions" required class="permission-list">
          <el-radio-group v-model="form.permissions">
            <el-radio label="spot">现货</el-radio>
            <el-radio label="usdtSwap">U本位永续合约</el-radio>
          </el-radio-group>
        </el-form-item>
        
        <!-- 限流规则表格 -->
        <div class="rate-limit-table">
          <div class="rate-limit-header">
            <h3 class="rate-limit-title">限流规则</h3>
            <el-button type="primary" size="mini" icon="el-icon-plus" @click="addRateLimit">新增</el-button>
          </div>
          <el-table :data="form.rateLimits" border style="width: 100%">
            <el-table-column label="限流类型" align="center">
              <template slot-scope="scope">
                <el-select v-model="scope.row.type" placeholder="请选择" size="mini">
                  <el-option label="现货" value="spot" />
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="时间周期(秒)" align="center">
              <template slot-scope="scope">
                <el-input-number 
                  v-model="scope.row.period" 
                  :min="1" 
                  size="mini"
                  controls-position="right"
                />
              </template>
            </el-table-column>
            <el-table-column label="限制次数" align="center">
              <template slot-scope="scope">
                <el-input-number 
                  v-model="scope.row.limit" 
                  :min="1" 
                  size="mini"
                  controls-position="right"
                />
              </template>
            </el-table-column>
            <el-table-column label="操作" width="80" align="center">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  icon="el-icon-delete"
                  @click="removeRateLimit(scope.$index)"
                />
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确定 Ctrl + Enter</el-button>
        <el-button @click="cancel">取消 Esc</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'Exchange',
  data() {
    return {
      // 遮罩层
      loading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 表格数据
      tableData: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      // 当前选中的标签页
      activeTab: 'Binance',
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        uid: undefined,
        remark: undefined
      },
      // 表单参数
      form: {
        id: undefined,
        exchange: undefined,
        parentUid: '0',
        uid: undefined,
        account: undefined,
        accessKey: undefined,
        secretKey: undefined,
        passphrase: undefined,
        remark: undefined,
        permissions: 'spot',
        rateLimits: []
      },
      // 表单校验
      rules: {
        exchange: [
          { required: true, message: '请选择交易所', trigger: 'change' }
        ],
        parentUid: [
          { required: true, message: '请选择母账号', trigger: 'change' }
        ],
        account: [
          { required: true, message: '请输入账号', trigger: 'blur' }
        ],
        uid: [
          { required: true, message: '请输入UID', trigger: 'blur' }
        ],
        accessKey: [
          { required: true, message: '请输入Access Key', trigger: 'blur' }
        ],
        secretKey: [
          { required: true, message: '请输入Secret Key', trigger: 'blur' }
        ],
        remark: [
          { required: true, message: '请输入备注', trigger: 'blur' }
        ],
        permissions: [
          { required: true, message: '请选择权限', trigger: 'change' }
        ]
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.loading = true
      // 模拟数据
      setTimeout(() => {
        this.tableData = [
          {
            id: 1,
            username: 'admin',
            uid: '12345',
            account: 'test1',
            accessKey: 'ak_123456789',
            secretKey: 'sk_987654321',
            passphrase: 'pass123',
            remark: '测试账号1'
          },
          {
            id: 2,
            username: 'test',
            uid: '67890',
            account: 'test2',
            accessKey: 'ak_abcdefgh',
            secretKey: 'sk_hgfedcba',
            passphrase: 'pass456',
            remark: '测试账号2'
          }
        ]
        this.total = 2
        this.loading = false
      }, 300)
    },
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    resetQuery() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        uid: undefined,
        remark: undefined
      }
      this.handleQuery()
    },
    handleAdd() {
      this.reset()
      this.open = true
      this.title = '添加交易所账号'
    },
    handleUpdate(row) {
      this.reset()
      this.form = Object.assign({}, row)
      this.open = true
      this.title = '修改交易所账号'
    },
    handleDelete(row) {
      this.$confirm('是否确认删除该账号?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message.success('删除成功')
        this.getList()
      })
    },
    addRateLimit() {
      this.form.rateLimits.push({
        type: 'spot',
        period: 1,
        limit: 1
      })
    },
    removeRateLimit(index) {
      this.form.rateLimits.splice(index, 1)
    },
    reset() {
      this.form = {
        id: undefined,
        exchange: undefined,
        parentUid: '0',
        uid: undefined,
        account: undefined,
        accessKey: undefined,
        secretKey: undefined,
        passphrase: undefined,
        remark: undefined,
        permissions: 'spot',
        rateLimits: []
      }
    },
    submitForm() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          if (this.form.id) {
            this.$message.success('修改成功')
          } else {
            this.$message.success('新增成功')
          }
          this.open = false
          this.getList()
        }
      })
    },
    cancel() {
      this.open = false
      this.reset()
    }
  }
}
</script>

<style lang="scss" scoped>
.mb8 {
  margin-bottom: 8px;
}

.exchange-dialog {
  ::v-deep .el-dialog__body {
    padding: 25px 30px;
  }

  .permission-list {
    margin-bottom: 20px;
  }

  .rate-limit-table {
    .rate-limit-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
      padding: 0 0 0 20px;

      .rate-limit-title {
        font-size: 16px;
        font-weight: bold;
        margin: 0;
        color: #303133;
      }
    }

    ::v-deep .el-table {
      margin-bottom: 20px;

      .el-input-number.is-controls-right .el-input__inner {
        padding-left: 5px;
        padding-right: 25px;
      }

      .el-table__header-wrapper {
        th {
          background-color: #f5f7fa;
          font-size: 14px;
          font-weight: 500;
        }
      }

      .el-table__body-wrapper {
        td {
          padding: 8px 0;
        }
      }
    }
  }
}

::v-deep .el-dialog__header {
  padding: 15px 20px;
  border-bottom: 1px solid #e8e8e8;

  .el-dialog__title {
    font-size: 16px;
    font-weight: 500;
  }
}

::v-deep .el-dialog__footer {
  padding: 15px 20px;
  border-top: 1px solid #e8e8e8;
}

::v-deep .el-form-item.is-required .el-form-item__label:before {
  margin-right: 2px;
}

::v-deep .el-input.is-disabled .el-input__inner {
  color: #606266;
  background-color: #f5f7fa;
}
</style> 